<template>
  <div ref="splitPane" class="split-pane" :class="direction" :style="{ flexDirection: direction }">
    <div class="pane pane-one"
         :style="lengthType + ':'+paneLengthValue"
    ><slot name="one"></slot>
    </div>
    <div class="pane-trigger" :style="lengthType + ':'+ triggerLengthValue" @mousedown="handleMouseDown"></div>
    <div class="pane pane-two"><slot name="two"></slot></div>
  </div>
</template>
<script setup>
import {computed, getCurrentInstance, ref, toRefs} from "vue";

const {proxy} = getCurrentInstance();
const props = defineProps({
  // 属性有两个,row,column
  direction: {
    type: String,
    default: 'row'
  },
  // 区域1宽度 (%)
  paneLengthPercent: {
    type: Number,
    default: 50
  },
  // 滑动器宽度 （px）
  triggerLength: {
    type: Number,
    default: 30
  },
  min: {
    type: Number,
    default: 10
  },

  max: {
    type: Number,
    default: 90
  }
})
const paneLengthPercent = ref(props.paneLengthPercent)
const triggerLength = ref(props.triggerLength)
const min = ref(props.min)
const max = ref(props.max)
const {direction} = toRefs(props)
const lengthType = computed({
  get() {
    return props.direction === 'row' ? 'width' : 'height'
  },
  set(val) {
    // return  direction.value === 'row' ? 'width' : 'height'
  }
})

const paneLengthValue = computed({
  get() {
    return `calc(${paneLengthPercent.value}% - ${triggerLength.value / 2 + 'px'})`
  },
  set(val) {
    // return `calc(${paneLengthPercent.value}% - ${triggerLength.value / 2 + 'px'})`
  }
})
const triggerLengthValue = computed({
  get() {
    return triggerLength.value + 'px'
  },
  set(val) {
    // 不知道什么原理分页的时候要这样计算属性的写
    // return triggerLength.value + 'px'
  }
})


// 按下滑动器
function handleMouseDown(e) {
  document.addEventListener('mousemove', handleMouseMove)
  document.addEventListener('mouseup', handleMouseUp)
}

// 按下滑动器后移动鼠标
function handleMouseMove(e) {

  const clientRect = proxy.$refs["splitPane"].getBoundingClientRect()
  let paneLengthPercents = 0
  if (direction.value === 'row') {
    const offset = e.pageX - clientRect.left
    paneLengthPercents = (offset / clientRect.width) * 100
  } else {
    const offset = e.pageY - clientRect.top
    paneLengthPercents = (offset / clientRect.height) * 100
  }


  if (paneLengthPercents < min.value) {
    paneLengthPercents = min.value
  }
  if (paneLengthPercents > max.value) {
    paneLengthPercents = max.value
  }

  paneLengthPercent.value = paneLengthPercents

}

// 松开滑动器
function handleMouseUp() {
  document.removeEventListener('mousemove', handleMouseMove)
}


</script>


<style scoped lang="scss">
.split-pane {
  height: 100%;
  display: flex;

  &.row {
    .pane {
      height: 100%;
    }

    .pane-trigger {
      height: 100%;
    }
  }

  &.column {
    .pane {
      width: 100%;
    }

    .pane-trigger {
      width: 100%;
    }
  }

  .pane-one {
    width: 50%;
  }

  .pane-trigger {
    width: 10px;
    height: 100%;
    cursor: pointer;
    user-select: none;
    background: palegoldenrod;
  }

  .pane-two {
    flex: 1;
  }
}
</style>
